<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>资料下载</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container" style="width: 600px;float: left">
    <table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
<script src="layui/layui.js"></script>
<script>
    layui.use(function(){
        var layer = layui.layer
            ,form = layui.form
            ,$ = layui.$
            ,table = layui.table
            ,laypage = layui.laypage
            ,element = layui.element
            ,laydate = layui.laydate
            ,util = layui.util;
        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 'full-20'
            ,url: '/getFileDataList' //数据接口
            ,title: '文件列表'
            ,method:'post'
            ,page: false //开启分页
            ,toolbar: false //开启工具栏
            ,totalRow: false //开启合计行
            ,cols: [
                [
                    {field: 'path', title: '文件路径',  sort: true, fixed: 'left',hide:true}
                    ,{field: 'name', title: '名称'}
                    ,{fixed: 'right', width:150, align:'center', toolbar: '#rightBar'}
                ]
            ]/*,
            done: function (res, curr, count) {
                $('body').on("mouseenter",".layui-table-body tr",function () {
                    $(this).siblings().find("div").css("color","#666");//字体色
                    $(this).find("div").css("color","#ff4d4d");//光标色
                })
            }*/
        });
        //工具条事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            if(layEvent === 'down'){
                var xmlResquest = new XMLHttpRequest(); // 获取XMLHttpRequest
                xmlResquest.open("POST", "/downFile", true); //  发起请求 url-/file-download
                xmlResquest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置请求头类型
                xmlResquest.responseType = "blob";
                xmlResquest.onload = function() {//  返回
                    var content = xmlResquest.response;
                    var elink = document.createElement("a");// 组装a标签
                    var newFileName = data.name;  //下载的文件名
                    elink.download = newFileName;  //设置文件下载路径
                    elink.style.display = "none";
                    var blob = new Blob([content]);
                    elink.href = URL.createObjectURL(blob);
                    document.body.appendChild(elink);
                    elink.click();
                    document.body.removeChild(elink);
                };
                xmlResquest.send('filePath='+data.path);
                layer.closeAll();
            }
        });

    });
</script>

<script type="text/html" id="rightBar">
    <a class="layui-btn layui-btn-xs" lay-event="down">下载</a>

</script>
</body>
</html>